<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能客户关系管理助手 - 订单管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --dark: #1e1e2c;
            --darker: #14141f;
            --light: #f8f9fa;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --gray: #6c757d;
            --border-radius: 8px;
            --transition: all 0.3s ease;
        }

        body {
            background-color: var(--darker);
            color: var(--light);
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 250px;
            background-color: var(--dark);
            padding: 20px 0;
            height: 100vh;
            position: fixed;
            transition: var(--transition);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            z-index: 100;
        }

        .logo-container {
            display: flex;
            align-items: center;
            padding: 0 20px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 20px;
        }

        .logo {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--accent), var(--primary));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }

        .logo i {
            font-size: 20px;
        }

        .logo-text {
            font-size: 20px;
            font-weight: 700;
            background: linear-gradient(to right, var(--accent), var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .nav-links {
            list-style: none;
            padding: 0 15px;
        }

        .nav-links li {
            margin-bottom: 5px;
        }

        .nav-links a {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.7);
            border-radius: var(--border-radius);
            transition: var(--transition);
        }

        .nav-links a:hover, .nav-links a.active {
            background-color: rgba(67, 97, 238, 0.2);
            color: var(--light);
        }

        .nav-links a i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        .main-content {
            flex: 1;
            margin-left: 250px;
            padding: 20px;
            transition: var(--transition);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .page-title {
            font-size: 24px;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        .page-title i {
            margin-right: 10px;
            color: var(--accent);
        }

        .user-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-profile {
            display: flex;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.08);
            padding: 8px 15px;
            border-radius: 30px;
            cursor: pointer;
            transition: var(--transition);
        }

        .user-profile:hover {
            background-color: rgba(255, 255, 255, 0.15);
        }

        .user-profile img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 10px;
            object-fit: cover;
        }

        .card {
            background-color: var(--dark);
            border-radius: var(--border-radius);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            margin-bottom: 25px;
            overflow: hidden;
        }

        .card-header {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
        }

        .card-body {
            padding: 20px;
        }

        .order-management {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .action-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .filters {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            background-color: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: var(--border-radius);
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            min-width: 200px;
        }

        .filter-group label {
            font-size: 14px;
            margin-bottom: 5px;
            opacity: 0.8;
        }

        .filter-group select, .filter-group input {
            background-color: rgba(255, 255, 255, 0.08);
            border: none;
            padding: 10px 15px;
            border-radius: var(--border-radius);
            color: var(--light);
        }

        .filter-group select:focus, .filter-group input:focus {
            outline: none;
            background-color: rgba(255, 255, 255, 0.12);
        }

        .table-container {
            overflow-x: auto;
            border-radius: var(--border-radius);
            background-color: rgba(255, 255, 255, 0.05);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 1000px;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        th {
            background-color: rgba(67, 97, 238, 0.2);
            font-weight: 600;
            color: var(--accent);
        }

        tr:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }

        .actions {
            display: flex;
            gap: 8px;
        }

        .action-btn {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: none;
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--light);
            cursor: pointer;
            transition: var(--transition);
        }

        .action-btn:hover {
            background-color: var(--accent);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
        }

        .btn i {
            margin-right: 8px;
        }

        .btn-primary {
            background-color: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--secondary);
        }

        .btn-outline {
            background-color: transparent;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.7);
        }

        .btn-outline:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--light);
        }

        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .spinner {
            width: 24px;
            height: 24px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: var(--accent);
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .status-badge {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }

        .status-pending {
            background-color: rgba(255, 152, 0, 0.2);
            color: var(--warning);
        }

        .status-processing {
            background-color: rgba(67, 97, 238, 0.2);
            color: var(--accent);
        }

        .status-shipped {
            background-color: rgba(76, 175, 80, 0.2);
            color: var(--success);
        }

        .status-completed {
            background-color: rgba(106, 5, 114, 0.2);
            color: #6a0572;
        }

        .status-cancelled {
            background-color: rgba(244, 67, 54, 0.2);
            color: var(--danger);
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal {
            background-color: var(--dark);
            width: 90%;
            max-width: 800px;
            border-radius: var(--border-radius);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        .modal-header {
            padding: 20px;
            background-color: rgba(67, 97, 238, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--accent);
        }

        .modal-close {
            background: none;
            border: none;
            color: var(--light);
            font-size: 20px;
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: var(--transition);
        }

        .modal-close:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .modal-body {
            padding: 20px;
            max-height: 70vh;
            overflow-y: auto;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            opacity: 0.9;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            background-color: rgba(255, 255, 255, 0.08);
            border: none;
            border-radius: var(--border-radius);
            color: var(--light);
        }

        .form-group textarea {
            height: 100px;
            resize: vertical;
        }

        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            outline: none;
            background-color: rgba(255, 255, 255, 0.12);
        }

        .modal-footer {
            padding: 15px 20px;
            background-color: rgba(255, 255, 255, 0.05);
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .stat-card {
            background: var(--dark);
            border-radius: var(--border-radius);
            padding: 20px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }

        .stat-value {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }

        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            font-size: 20px;
        }

        .stat-icon.orders {
            background: rgba(67, 97, 238, 0.2);
            color: var(--accent);
        }

        .stat-icon.pending {
            background: rgba(255, 152, 0, 0.2);
            color: var(--warning);
        }

        .stat-icon.processing {
            background: rgba(76, 175, 80, 0.2);
            color: var(--success);
        }

        .stat-icon.completed {
            background: rgba(106, 5, 114, 0.2);
            color: #6a0572;
        }

        .item-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        .item-table th, .item-table td {
            padding: 10px 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .item-table th {
            background-color: rgba(67, 97, 238, 0.1);
            text-align: left;
        }

        .info-row {
            display: flex;
            margin-bottom: 10px;
        }

        .info-label {
            width: 100px;
            font-weight: 600;
            opacity: 0.8;
        }

        @media (max-width: 992px) {
            .sidebar {
                width: 80px;
            }

            .logo-text, .link-text {
                display: none;
            }

            .nav-links a {
                justify-content: center;
            }

            .nav-links a i {
                margin-right: 0;
                font-size: 20px;
            }

            .main-content {
                margin-left: 80px;
            }

            .filters {
                flex-direction: column;
            }
        }

        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .action-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
        }

        .date-range-picker {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .date-range-picker input[type="date"] {
            background-color: rgba(255, 255, 255, 0.08);
            border: none;
            padding: 10px 15px;
            border-radius: var(--border-radius);
            color: var(--light);
            width: 173px;
        }

        /* 金额区间输入框样式 */
        .amount-range {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .amount-range input {
            width: 170px;
        }

        /* 加载动画 */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }


        .filter-row {
            display: flex;
            gap: 15px;
            width: 100%;
            margin-bottom: 15px;
        }

        .time-filters {
            border-radius: var(--border-radius);
        }

        .filters {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .search-container {
            display: flex;
            flex-direction: column;
        }

        .search-container label {
            font-size: 14px;
            margin-bottom: 5px;
            opacity: 0.8;
        }

        .search-box {
            position: relative;
            height: 40px;
            display: flex;
            align-items: center;
        }

        .search-box input {
            background-color: rgba(255, 255, 255, 0.08);
            border: none;
            padding: 0 15px 0 40px;
            border-radius: 30px;
            color: var(--light);
            width: 250px;
            height: 100%;
            line-height: 1;
            margin: 0;
            transition: var(--transition);
        }

        .search-box input:focus {
            outline: none;
            background-color: rgba(255, 255, 255, 0.15);
            width: 300px;
        }

        .search-box i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.5);
            margin: 0;
        }

        .product-items {
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
            margin-top: 15px;
            overflow: hidden;
        }

        .item-header, .product-item {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 50px;
            gap: 10px;
            padding: 12px 15px;
            align-items: center;
        }

        .item-header {
            background-color: rgba(67, 97, 238, 0.1);
            font-weight: 600;
            color: var(--accent);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .product-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .product-item:last-child {
            border-bottom: none;
        }

        .product-item input {
            background-color: rgba(255, 255, 255, 0.08);
            border: none;
            padding: 8px 12px;
            border-radius: var(--border-radius);
            color: var(--light);
            width: 100%;
        }

        .product-item input:focus {
            outline: none;
            background-color: rgba(255, 255, 255, 0.12);
        }

        .remove-item {
            background: none;
            border: none;
            color: var(--danger);
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: var(--transition);
        }

        .remove-item:hover {
            background-color: rgba(244, 67, 54, 0.2);
        }

        .order-summary {
            margin-top: 20px;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: var(--border-radius);
            text-align: right;
        }

        .summary-row {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 10px;
        }

        .summary-row .label {
            margin-right: 15px;
            font-weight: 500;
        }

        .summary-row .value {
            font-weight: 700;
            font-size: 18px;
            color: var(--accent);
        }

        .required {
            color: var(--danger);
            margin-left: 3px;
        }
    </style>
</head>
<body>
<!-- 侧边导航 -->
<div class="sidebar">
    <div class="logo-container">
        <div class="logo">
            <i class="fas fa-brain"></i>
        </div>
        <div class="logo-text">智能CRM</div>
    </div>

    <ul class="nav-links">
        <li><a href="/main"><i class="fas fa-home"></i> <span class="link-text">AI助手</span></a></li>
        <li><a href="/customer"><i class="fas fa-users"></i> <span class="link-text">客户管理</span></a></li>
        <li><a href="/base_dict"><i class="fas fa-book"></i> <span class="link-text">数据字典</span></a></li>
        <li><a href="/usermanage"><i class="fas fa-user-cog"></i> <span class="link-text">用户管理</span></a></li>
        <li><a href="/product"><i class="fas fa-box"></i> <span class="link-text">产品管理</span></a></li>
        <li><a href="/orderitems" class="active"><i class="fas fa-shopping-cart"></i> <span class="link-text">订单管理</span></a></li>
    </ul>
</div>

<!-- 主内容区 -->
<div class="main-content" id="app">
    <!-- 头部区域 -->
    <div class="header">
        <div class="page-title">
            <i class="fas fa-shopping-cart"></i> 订单管理
        </div>

        <div class="user-actions">
            <div class="user-profile">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像">
                <span>管理员</span>
            </div>
        </div>
    </div>

    <!-- 订单管理区域 -->
    <div class="order-management">
        <!-- 统计卡片 -->
        <div class="stats-container">
            <div class="stat-card">
                <div class="stat-icon orders">
                    <i class="fas fa-shopping-cart"></i>
                </div>
                <div class="stat-value">{{ orders.length }}</div>
                <div class="stat-label">订单总数</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon pending">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stat-value">{{ pendingOrders }}</div>
                <div class="stat-label">待处理订单</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon processing">
                    <i class="fas fa-truck"></i>
                </div>
                <div class="stat-value">{{ processingOrders }}</div>
                <div class="stat-label">处理中订单</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon completed">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-value">{{ completedOrders }}</div>
                <div class="stat-label">已完成订单</div>
            </div>
        </div>

        <div class="action-bar">
            <h2><i class="fas fa-list"></i> 订单列表</h2>
            <div>0
                <button class="btn btn-primary" @click="openAddModal">
                    <i class="fas fa-plus"></i> 添加新订单
                </button>
            </div>
        </div>

        <!-- 筛选区域 -->
        <div class="filters">
            <div class="filter-row">
                <div class="filter-group">
                    <label>客户名称</label>
                    <select v-model="searchParams.custName" @change="filterOrders">
                        <option value="">全部客户</option>
                        <option
                                v-for="customer in customerList"
                                :key="customer.cust_id"
                                :value="customer.cust_name"
                        >
                            {{ customer.cust_name }}
                        </option>
                    </select>
                    <small v-if="customerList.length === 0" class="loading-text">
                        <span class="loading-spinner"></span> 加载客户列表中...
                    </small>
                </div>

                <div class="filter-group">
                    <label>订单金额区间</label>
                    <div class="amount-range">
                        <input type="number" v-model="searchParams.minAmount" @input="filterOrders" placeholder="最小值">
                        <span>-</span>
                        <input type="number" v-model="searchParams.maxAmount" @input="filterOrders" placeholder="最大值">
                    </div>
                </div>

                <div class="filter-group">
                    <label>订单状态</label>
                    <select v-model="searchParams.status" @change="filterOrders">
                        <option value="">全部状态</option>
                        <option value="pending">待处理</option>
                        <option value="processing">处理中</option>
                        <option value="shipped">已发货</option>
                        <option value="completed">已完成</option>
                        <option value="cancelled">已取消</option>
                    </select>
                </div>
                <div class="search-container">
                    <label>搜索：</label>
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" v-model="searchQuery" placeholder="搜索订单..." @input="searchCustomers">
                    </div>
                </div>
            </div>

            <div class="filter-row time-filters">
                <div class="filter-group">
                    <label>下单时间</label>
                    <div class="date-range-picker">
                        <input type="date" v-model="searchParams.orderTimeStart" @change="filterOrders">
                        <span>至</span>
                        <input type="date" v-model="searchParams.orderTimeEnd" @change="filterOrders">
                    </div>
                </div>

                <div class="filter-group">
                    <label>支付时间</label>
                    <div class="date-range-picker">
                        <input type="date" v-model="searchParams.payTimeStart" @change="filterOrders">
                        <span>至</span>
                        <input type="date" v-model="searchParams.payTimeEnd" @change="filterOrders">
                    </div>
                </div>

                <div class="filter-group">
                    <label>发货时间</label>
                    <div class="date-range-picker">
                        <input type="date" v-model="searchParams.deliveryTimeStart" @change="filterOrders">
                        <span>至</span>
                        <input type="date" v-model="searchParams.deliveryTimeEnd" @change="filterOrders">
                    </div>
                </div>

                <div class="filter-group">
                    <label>完成时间</label>
                    <div class="date-range-picker">
                        <input type="date" v-model="searchParams.completeTimeStart" @change="filterOrders">
                        <span>至</span>
                        <input type="date" v-model="searchParams.completeTimeEnd" @change="filterOrders">
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单表格视图 -->
        <div class="card" v-if="viewMode === 'table'">
            <div class="table-container">
                <table>
                    <thead>
                    <tr>
                        <th>订单ID</th>
                        <th>订单编号</th>
                        <th>客户名称</th>
                        <th>订单金额</th>
                        <th>订单状态</th>
                        <th>下单时间</th>
                        <th>支付时间</th>
                        <th>发货时间</th>
                        <th>完成时间</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-if="loading">
                        <td colspan="11" class="loading">
                            <div class="spinner"></div>
                            <span>加载订单数据中...</span>
                        </td>
                    </tr>
                    <tr v-else-if="filteredOrders.length === 0">
                        <td colspan="11" style="text-align: center; padding: 30px;">
                            没有找到匹配的订单
                        </td>
                    </tr>
                    <tr v-for="order in paginatedOrders" :key="order.order_id">
                        <td>{{ order.order_id }}</td>
                        <td>{{ order.order_no }}</td>
                        <td>{{ order.customers && order.customers.length > 0 ? order.customers[0].cust_name : '未知客户' }}</td>
                        <td>¥{{ order.order_amount.toFixed(2) }}</td>
                        <td>
                            <span class="status-badge" :class="getStatusClass(order.order_status)">
                                {{ getStatusText(order.order_status) }}
                            </span>
                        </td>
                        <td>{{ formatDateTime(order.order_time) }}</td>
                        <td>{{ formatDateTime(order.pay_time) || '-' }}</td>
                        <td>{{ formatDateTime(order.delivery_time) || '-' }}</td>
                        <td>{{ formatDateTime(order.complete_time) || '-' }}</td>
                        <td>{{ order.order_remark || '-' }}</td>
                        <td>
                            <div class="actions">
                                <button class="action-btn" @click="openDetailModal(order)">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="action-btn" @click="openEditModal(order)">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" @click="deleteOrder(order.order_id)">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 订单详情模态框 -->
        <div class="modal-overlay" v-if="showDetailModal">
            <div class="modal">
                <div class="modal-header">
                    <div class="modal-title">
                        <i class="fas fa-info-circle"></i> 订单详情 #{{ currentOrder.order_no }}
                    </div>
                    <button class="modal-close" @click="showDetailModal = false">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-grid">
                        <div class="form-group">
                            <label>订单ID</label>
                            <input type="text" :value="currentOrder.order_id" readonly>
                        </div>
                        <div class="form-group">
                            <label>订单编号</label>
                            <input type="text" :value="currentOrder.order_no" readonly>
                        </div>
                        <div class="form-group">
                            <label>客户名称</label>
                            <input type="text" :value="currentOrder.customers && currentOrder.customers.length > 0 ? currentOrder.customers[0].cust_name : '未知客户'" readonly>
                        </div>
                        <div class="form-group">
                            <label>订单金额</label>
                            <input type="text" :value="'¥' + currentOrder.order_amount.toFixed(2)" readonly>
                        </div>
                        <div class="form-group">
                            <label>订单状态</label>
                            <input type="text" :value="getStatusText(currentOrder.order_status)" readonly>
                        </div>
                        <div class="form-group">
                            <label>下单时间</label>
                            <input type="text" :value="formatDateTime(currentOrder.order_time)" readonly>
                        </div>
                        <div class="form-group">
                            <label>支付时间</label>
                            <input type="text" :value="formatDateTime(currentOrder.pay_time) || '-'" readonly>
                        </div>
                        <div class="form-group">
                            <label>发货时间</label>
                            <input type="text" :value="formatDateTime(currentOrder.delivery_time) || '-'" readonly>
                        </div>
                        <div class="form-group">
                            <label>完成时间</label>
                            <input type="text" :value="formatDateTime(currentOrder.complete_time) || '-'" readonly>
                        </div>
                        <div class="form-group" style="grid-column: 1 / -1;">
                            <label>备注</label>
                            <textarea :value="currentOrder.order_remark || '-'" readonly></textarea>
                        </div>
                    </div>

                    <h3>订单商品</h3>
                    <table class="item-table" v-if="currentOrder.items && currentOrder.items.length > 0">
                        <thead>
                        <tr>
                            <th>商品ID</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>金额</th>
                            <th>备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in currentOrder.items" :key="item.item_id">
                            <td>{{ item.prod_id }}</td>
                            <td>¥{{ item.unit_price.toFixed(2) }}</td>
                            <td>{{ item.quantity }}</td>
                            <td>¥{{ item.item_amount.toFixed(2) }}</td>
                            <td>{{ item.item_remark || '-' }}</td>
                        </tr>
                        </tbody>
                    </table>
                    <p v-else>此订单没有商品信息</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" @click="showDetailModal = false">关闭</button>
                </div>
            </div>
        </div>

        <div class="modal-overlay" v-if="showAddModal">
            <div class="modal">
                <div class="modal-header">
                    <div class="modal-title">
                        <i class="fas fa-plus-circle"></i> 创建新订单
                    </div>
                    <button class="modal-close" @click="closeAddModal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-grid">
                        <div class="form-group">
                            <label>客户名称 <span class="required">*</span></label>
                            <select v-model="newOrder.cust_id" required>
                                <option value="">请选择客户</option>
                                <option v-for="customer in customerList"
                                        :key="customer.cust_id"
                                        :value="customer.cust_id">
                                    {{ customer.cust_name }}
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>订单状态 <span class="required">*</span></label>
                            <select v-model="newOrder.order_status" required>
                                <option value="pending">待处理</option>
                                <option value="processing">处理中</option>
                                <option value="shipped">已发货</option>
                                <option value="completed">已完成</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>订单金额 <span class="required">*</span></label>
                            <input type="number" v-model="newOrder.order_amount" min="0" step="0.01" placeholder="输入订单金额" required>
                        </div>
                        <div class="form-group">
                            <label>下单时间</label>
                            <input type="datetime-local" v-model="newOrder.order_time">
                        </div>
                        <div class="form-group">
                            <label>支付时间</label>
                            <input type="datetime-local" v-model="newOrder.pay_time">
                        </div>
                        <div class="form-group">
                            <label>发货时间</label>
                            <input type="datetime-local" v-model="newOrder.delivery_time">
                        </div>
                        <div class="form-group">
                            <label>完成时间</label>
                            <input type="datetime-local" v-model="newOrder.complete_time">
                        </div>
                        <div class="form-group" style="grid-column: 1 / -1;">
                            <label>备注</label>
                            <textarea v-model="newOrder.order_remark" placeholder="输入订单备注信息..."></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline" @click="closeAddModal">取消</button>
                    <button class="btn btn-primary" @click="saveNewOrder" :disabled="isSaving">
                        <span v-if="isSaving" class="spinner"></span>
                        <span v-else>保存订单</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 分页控件 -->
        <div class="pagination" v-if="filteredOrders.length > 0" style="display: flex; justify-content: center; align-items: center; margin-top: 20px;">
            <button class="btn btn-outline" :disabled="currentPage === 1" @click="prevPage">
                <i class="fas fa-chevron-left"></i> 上一页
            </button>
            <span style="margin: 0 15px;">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
            <button class="btn btn-outline" :disabled="currentPage === totalPages" @click="nextPage">
                下一页 <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </div>
</div>

<script>
    axios.defaults.baseURL = '/api';
    new Vue({
        el: '#app',
        data: {
            orders: [],
            filteredOrders: [],
            customerList: [],
            loading: true,
            showDetailModal: false,
            currentOrder: null,
            currentPage: 1,
            itemsPerPage: 10,
            viewMode: 'table',
            searchParams: {
                custName: '',
                minAmount: null,
                maxAmount: null,
                orderTimeStart: '',
                orderTimeEnd: '',
                payTimeStart: '',
                payTimeEnd: '',
                deliveryTimeStart: '',
                deliveryTimeEnd: '',
                completeTimeStart: '',
                completeTimeEnd: ''
            },
            showAddModal: false,
            isSaving: false,
            newOrder: {
                cust_id: '',
                order_status: 'pending',
                order_time: '',
                pay_time: '',
                delivery_time: '',
                complete_time: '',
                order_remark: '',
                order_amount: 0,
                items: [
                    {prod_id: '', unit_price: 0, quantity: 1, item_amount: 0, item_remark: ''}
                ]
            }
        },
        computed: {
            pendingOrders() {
                return this.orders.filter(o => o.order_status === 'pending').length;
            },
            processingOrders() {
                return this.orders.filter(o => o.order_status === 'processing' || o.order_status === 'shipped').length;
            },
            completedOrders() {
                return this.orders.filter(o => o.order_status === 'completed').length;
            },
            totalPages() {
                return Math.ceil(this.filteredOrders.length / this.itemsPerPage);
            },
            paginatedOrders() {
                const start = (this.currentPage - 1) * this.itemsPerPage;
                return this.filteredOrders.slice(start, start + this.itemsPerPage);
            }
        },
        mounted() {
            this.fetchCustomerList();
            this.fetchOrders();
        },
        methods: {
            fetchCustomerList() {
                axios.get('/customers/allcustomer')
                    .then(response => {
                        this.customers = response.data;
                        this.customerList = [...this.customers];
                        this.loading = false;
                    })
                    .catch(error => {
                        console.error('获取客户列表失败:', error);
                        this.loading = false;
                        this.showApiStatus('获取客户列表失败，请重试', 'error');
                    });

            },
            fetchOrders() {
                this.loading = true;
                axios.get('/orders/allproduct')
                    .then(res => {
                        if (res.data && res.data.data) {
                            this.orders = res.data.data;
                            this.filterOrders();
                        }
                    })
                    .catch(err => {
                        console.error('获取订单数据失败:', err);
                        this.orders = [];
                        this.filteredOrders = [];
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            filterOrders() {
                let filtered = [...this.orders];

                // 按客户名称筛选
                if (this.searchParams.custName) {
                    filtered = filtered.filter(order =>
                            order.customers && order.customers.some(c =>
                                c.cust_name === this.searchParams.custName
                            )
                    );
                }

                // 按金额区间筛选
                if (this.searchParams.minAmount) {
                    filtered = filtered.filter(order =>
                        order.order_amount >= parseFloat(this.searchParams.minAmount)
                    );
                }
                if (this.searchParams.maxAmount) {
                    filtered = filtered.filter(order =>
                        order.order_amount <= parseFloat(this.searchParams.maxAmount)
                    );
                }

                //按状态筛选
                if (this.searchParams.status) {
                    filtered = filtered.filter(order =>
                        order.order_status?.toLowerCase() === this.searchParams.status.toLowerCase()
                    );
                }

                // 按时间范围筛选
                const filterByDateRange = (date, start, end) => {
                    if (!date) return false;
                    const orderDate = new Date(date).getTime();
                    if (start && end) {
                        const startDate = new Date(start).getTime();
                        const endDate = new Date(end).getTime() + 86400000; // 加一天
                        return orderDate >= startDate && orderDate <= endDate;
                    }
                    if (start) {
                        const startDate = new Date(start).getTime();
                        return orderDate >= startDate;
                    }
                    if (end) {
                        const endDate = new Date(end).getTime() + 86400000; // 加一天
                        return orderDate <= endDate;
                    }
                    return true;
                };

                // 下单时间筛选
                if (this.searchParams.orderTimeStart || this.searchParams.orderTimeEnd) {
                    filtered = filtered.filter(order =>
                        filterByDateRange(order.order_time, this.searchParams.orderTimeStart, this.searchParams.orderTimeEnd)
                    );
                }

                // 支付时间筛选
                if (this.searchParams.payTimeStart || this.searchParams.payTimeEnd) {
                    filtered = filtered.filter(order =>
                        order.pay_time && filterByDateRange(order.pay_time, this.searchParams.payTimeStart, this.searchParams.payTimeEnd)
                    );
                }

                // 发货时间筛选
                if (this.searchParams.deliveryTimeStart || this.searchParams.deliveryTimeEnd) {
                    filtered = filtered.filter(order =>
                        order.delivery_time && filterByDateRange(order.delivery_time, this.searchParams.deliveryTimeStart, this.searchParams.deliveryTimeEnd)
                    );
                }

                // 完成时间筛选
                if (this.searchParams.completeTimeStart || this.searchParams.completeTimeEnd) {
                    filtered = filtered.filter(order =>
                        order.complete_time && filterByDateRange(order.complete_time, this.searchParams.completeTimeStart, this.searchParams.completeTimeEnd)
                    );
                }

                this.filteredOrders = filtered;
                this.currentPage = 1;
            },
            getStatusText(status) {
                const statusMap = {
                    pending: '待处理',
                    processing: '处理中',
                    shipped: '已发货',
                    completed: '已完成',
                    cancelled: '已取消'
                };
                return statusMap[status] || status;
            },
            getStatusClass(status) {
                const classMap = {
                    pending: 'status-pending',
                    processing: 'status-processing',
                    shipped: 'status-shipped',
                    completed: 'status-completed',
                    cancelled: 'status-cancelled'
                };
                return classMap[status] || '';
            },
            openDetailModal(order) {
                this.currentOrder = JSON.parse(JSON.stringify(order));
                this.showDetailModal = true;
            },
            openEditModal(order) {
                this.currentOrder = JSON.parse(JSON.stringify(order));
                alert('编辑功能待实现');
            },
            async deleteOrder(id) {
                if (confirm('确定要删除此订单吗？此操作不可撤销。')) {
                    try {
                        await axios.delete(`/orders/${id}`);
                        this.orders = this.orders.filter(o => o.order_id !== id);
                        this.filteredOrders = this.filteredOrders.filter(o => o.order_id !== id);
                        alert('订单删除成功！');
                    } catch (err) {
                        console.error('删除订单失败:', err);
                        alert('删除订单失败: ' + (err.response?.data?.message || err.message));
                    }
                }
            },
            formatDateTime(dateTime) {
                if (!dateTime) return '-';
                const date = new Date(dateTime);
                return date.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            },
            nextPage() {
                if (this.currentPage < this.totalPages) this.currentPage++;
            },
            prevPage() {
                if (this.currentPage > 1) this.currentPage--;
            },
            openAddModal() {
                // 初始化新订单数据
                this.newOrder = {
                    cust_id: '',
                    order_status: 'pending',
                    order_amount: 0,
                    order_time: this.getCurrentDateTime(),
                    pay_time: '',
                    delivery_time: '',
                    complete_time: '',
                    order_remark: ''
                };
                this.showAddModal = true;
            },

            closeAddModal() {
                this.showAddModal = false;
            },

            getCurrentDateTime() {
                const now = new Date();
                // 转换为本地日期时间字符串（YYYY-MM-DDTHH:mm）
                return new Date(now.getTime() - now.getTimezoneOffset() * 60000)
                    .toISOString()
                    .slice(0, 16);
            },

            async saveNewOrder() {
                // 验证必填字段
                if (!this.newOrder.cust_id) {
                    alert('请选择客户');
                    return;
                }

                if (!this.newOrder.order_status) {
                    alert('请选择订单状态');
                    return;
                }

                if (!this.newOrder.order_amount || this.newOrder.order_amount <= 0) {
                    alert('请输入有效的订单金额');
                    return;
                }

                this.isSaving = true;

                try {
                    // 发送创建订单请求
                    const response = await axios.post('/orders', this.newOrder);

                    // 检查后端返回的JsonResult结构
                    if (response.data && response.data.success) {
                        alert('订单创建成功！');

                        // 关闭模态框并刷新订单列表
                        this.closeAddModal();
                        this.fetchOrders();
                    } else {
                        // 使用后端返回的错误消息
                        const errorMsg = response.data.message || '创建订单失败';
                        throw new Error(errorMsg);
                    }
                } catch (error) {
                    console.error('创建订单失败:', error);
                    alert('创建订单失败: ' + (error.response?.data?.message || error.message));
                } finally {
                    this.isSaving = false;
                }
            }
        }
    })

</script>

</body>
</html>